<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        li{
            align-self: buttom;
            background-color: red;
            float: left;
            line-height: 1000px;
            width: 18px;
            margin:0 5px;
            list-style: none;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
    <button onclick="fo()">左侧入</button>
    <button onclick="add()">右侧入</button>
    <button onclick="firstout()">左侧出</button>
    <button onclick="lastout()">右侧出</button>
    <button onclick="randomnum()">50随机</button>
    <button onclick="bubbleSort()">排序</button>
    <ul>

    </ul>

<script>
let num=0;
let ul = document.querySelector('ul')
let i;
let rank=[];
function randomnum() {
    for(i=num;i<50;i++)
    {
    let li = document.createElement('li')
    let h=Math.floor((Math.random()*80)+20);
    rank=append(rank,h)
    num++;   
    
    li.setAttribute("style","width:10px;height:"+h*7+"px;'");
    li.style.marginTop=700-h*7+"px";
    ul.appendChild(li)
   
    }
}
function add() {
    if(num>=49){
        alart("已经有50个了")
    }else{
    let li = document.createElement('li')
    let text = document.getElementById("text")
    
   let h=document.getElementById("text").value
    rank=append(rank,h)
    num++;   
    li.setAttribute("style","width:10px;height:"+h*7+"px;'");
    li.style.marginTop=700-h*7+"px";
    ul.appendChild(li)
    
}}

function fo() {
    if(num>=49){
        alart("已经有50个了")
    }else{
    let li = document.createElement('li')
    let text = document.getElementById("text")
    
    let h=document.getElementById("text").value;
   
    rank.unshift(h);
    console.log(rank.length);
    num++;   
    li.setAttribute("style","width:10px;height:"+h*7+"px;'");
    li.style.marginTop=700-h*7+"px";
    ul.insertBefore(li, ul.firstElementChild)
}}

function firstout() {
    alert(ul.firstElementChild.style.height)
    ul.removeChild(ul.firstElementChild)
    rank=curtail(rank)
    num--
}

function lastout() {
    alert(ul.lastElementChild.style.height)
    ul.removeChild(ul.lastElementChild)
    rank=truncate(rank)
    num--
}

async function bubbleSort() {
    let len = rank.length;
    console.log(515)
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            
        if (rank[j] < rank[j+1]) {        // 相邻元素两两对比
            
                let temp = rank[j+1];        // 元素交换
                rank[j+1] = rank[j];
                rank[j] = temp;
                show(j)

                await sleep(10)   
                
            }
        
   
        }
    }
   
   
    
   
}

function append(arr, item) {
    var arr2=arr.slice(0);
    arr2.push(item);
    return arr2;
}


function curtail(arr) {
  let newArr = [...arr];
  newArr.splice(0,1);
  return newArr;
}
function truncate(arr) {
   var newArray = arr.slice(0, arr.length - 1);
   return newArray;
}
function show() {
   let ee=rank.length;
   let b;
   let ul = document.querySelector('ul')
  for(b=0;b<ee;b++)
  {
    ul.innerHTML=""

  }
 
   for(b=0;b<ee;b++)
   {
    let li = document.createElement('li');
   
    
   
    
    li.setAttribute("style","width:10px;height:"+rank[b]*7+"px;'");
    li.style.marginTop=700-rank[b]*7+"px";
    ul.insertBefore(li, ul.firstElementChild)
   }

}
function sleep(millisecond) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, millisecond)
        })
    }


   
   



    </script>
</body>
</html>